<template>
  <div class="table-box">
    <ProTable ref="proTable" title="菜单列表" row-key="path" :indent="20" :columns="columns" :data="menuData">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" @click="addmenu('新增')" :icon="CirclePlus">新增菜单</el-button>
      </template>
      <!-- 菜单图标 -->
      <template #icon="scope">
        <el-icon :size="18">
          <component :is="scope.row.meta.icon"></component>
        </el-icon>
      </template>
      <!-- 菜单操作 -->
      <template #operation="scope">
        <el-tooltip class="box-item" effect="dark" content="编辑" placement="top">
          <el-button type="primary" link :icon="EditPen" @click="addmenu('编辑', scope.row)"></el-button>
        </el-tooltip>

        <el-tooltip class="box-item" effect="dark" content="删除" placement="top">
          <el-button type="primary" link :icon="Delete" @click="deletes(scope.row)"></el-button>
        </el-tooltip>
      </template>
    </ProTable>
    <!-- @close抽屉关闭 -->
    <!-- <el-drawer v-model="drawer" @close="handleCloseDrawer" title="I am the title" :with-header="false"> </el-drawer> -->
    <UserDrawer ref="drawerRef" @mnenuset="mnenuset" />
  </div>
</template>

<script setup lang="ts" name="menuMange">
import { ref, onMounted } from "vue";
import { ColumnProps } from "@/components/ProTable/interface";
import { Delete, EditPen, CirclePlus } from "@element-plus/icons-vue";
// import authMenuList from "@/assets/json/authMenuList.json";
import ProTable from "../menuMange/component/table.vue";
// import { useAuthStore } from "../../../stores/modules/auth";
import UserDrawer from "@/views/system/menuMange/component/index.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  PostCaiDanRuleAddport,
  GetCaiDanRuleAllport,
  PostCaiDanRuleUpdateport,
  PostCaiDanRuleDeleteport
} from "@/api/modules/user";

// import { useHandleData } from "@/hooks/useHandleData";

const drawerRef = ref<any>(null);
// const iconValue = ref("");
// const drawer = ref(false);
// const useAuthStores = useAuthStore();
const proTable = ref();

const menuData = ref<any>();
const stockpileGetCaiDanRuleAll = ref<any>([]);

const mnenuset = () => {
  GetCaiDanRuleAll();
};
// 查询全部菜单
const GetCaiDanRuleAll = () => {
  GetCaiDanRuleAllport().then((res: any) => {
    stockpileGetCaiDanRuleAll.value = res.Data;
    menuData.value = stockpileGetCaiDanRuleAll.value;
  });
};

// 删除菜单
const deletes = async (params: any) => {
  console.log(params, "params");
  // await useHandleData(PostCaiDanRuleDeleteport, params.iRuleId, `是否删除删除【${params.KeShiMingCheng}】用户`);
  // proTable.value?.getTableList();
  // GetCaiDanRuleAll();
  ElMessageBox.confirm("确认删除吗？", "温馨提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => {
    const data = {
      iRuleId: params.iRuleId
    };
    PostCaiDanRuleDeleteport(data).then((res: any) => {
      console.log(res);
      if (res.Success == 0) {
        ElMessage({
          type: "success",
          message: "删除成功"
        });
        GetCaiDanRuleAll();
      }
    });
  });
};

const addmenu = (title: any, row?: any) => {
  const params = {
    title,
    row: { ...row },
    isView: title === "查看",
    api: title === "新增" ? PostCaiDanRuleAddport : title === "编辑" ? PostCaiDanRuleUpdateport : undefined,
    getTableList: proTable.value?.getTableList
  } as any;
  drawerRef.value?.acceptParams(params);
};
onMounted(() => {
  GetCaiDanRuleAll();
});

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "meta.title", label: "菜单名称", align: "left", search: { el: "input" } },
  { prop: "meta.icon", label: "菜单图标" },
  { prop: "name", label: "菜单 name", search: { el: "input" } },
  { prop: "path", label: "菜单路径", width: 300, search: { el: "input" } },
  { prop: "component", label: "组件路径", width: 300 },
  { prop: "operation", label: "操作", width: 250, fixed: "right" }
];
</script>
